/*
 * @Description: 店铺商品查询
 * @Author: kanglin
 * @Date: 2018-07-09 14:08:24
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >

</style>

<template>
	<div class="v-customer-product-query">
		<Form
			ref="formInline"
			name="query__form"
			inline
			@keydown.native.enter.prevent="handleSearch">

			<Form-item
				:label-width="80"
				:label="$t('common.keyword')"
				prop="keyword">
				<i-input
					v-model="formValidate.keyword"
					:placeholder="$t('common.please_enter_key')"
					name="query__keyword"
					type="text"/>
			</Form-item>

			<Form-item
				:label-width="80"
				:label="$t('store.name')"
				porp="is_sale">
				<Select
					v-model="formValidate.store_id"
					clearable
					name="query__name"
					style="width:100px"
					transfer>
					<Option
						v-for="item in stores"
						:value="item.id"
						:key="item.id">{{ item.name }}</Option>
				</Select>
			</Form-item>

			<Form-item
				:label-width="80"
				:label="$t('product.is_sale')"
				porp="is_sale">
				<Select
					v-model="formValidate.is_sale"
					name="query__is_sale"
					clearable
					style="width:100px"
					transfer>
					<Option
						v-for="status in status_options"
						:value="status.value"
						:key="status.value">{{ status.label }}</Option>
				</Select>
			</Form-item>

			<Form-item
				:label-width="80"
				:label="$t('product.is_deleted')"
				porp="is_deleted">
				<Select
					v-model="formValidate.is_deleted"
					clearable
					style="width:100px"
					name="query__is_delete"
					transfer>
					<Option
						v-for="status in status_options"
						:value="status.value"
						:key="status.value">{{ status.label }}</Option>
				</Select>
			</Form-item>

			<Form-item
				:label-width="100"
				:label="$t('product.is_hot')"
				porp="is_hot">
				<Select
					v-model="formValidate.is_hot"
					clearable
					style="width:100px"
					name="query__is_hot"
					transfer>
					<Option
						v-for="status in status_options"
						:value="status.value"
						:key="status.value">{{ status.label }}</Option>
				</Select>
			</Form-item>

			<Form-item
				:label-width="100"
				:label="$t('product.is_new')"
				porp="is_new">
				<Select
					v-model="formValidate.is_new"
					clearable
					name="query__is_new"
					style="width:100px"
					transfer>
					<Option
						v-for="status in status_options"
						:value="status.value"
						:key="status.value">{{ status.label }}</Option>
				</Select>
			</Form-item>

			<Form-item
				:label-width="80"
				:label="$t('product.brand')"
				porp="brand_id">
				<Select
					v-model="formValidate.brand_id"
					clearable
					name="query__brand"
					style="width:100px">
					<Option
						v-for="( value , key ) in brands"
						:value="key + ''"
						:key="key">{{ value }}</Option>
				</Select>
			</Form-item>

			<Form-item
				:label-width="80"
				:label="$t('product.category')"
				prop="category_id">
				<Select
					v-model="formValidate.category_id"
					clearable
					name="query__category"
					style="width:100px">
					<Option
						v-for="( value , key ) in categories"
						:value="key + ''"
						:key="key">{{ value }}</Option>
				</Select>
			</Form-item>

			<Form-item>
				<Button
					type="primary"
					name="query__submit"
					@click="handleSearch">
					{{ $t('common.search') }}
				</Button>
			</Form-item>
		</Form>
	</div>
</template>

<script>
export default {
	name: 'CustomerProductQuery',
	props: {
		brands: {
			type: Object,
			default() {
				return {};
			},
		},
		categories: {
			type: Object,
			default() {
				return {};
			},
		},
		stores: {
			type: Array,
			default() {
				return {};
			},
		},
		search: {
			type: Function,
			required: true,
		},
	},
	data() {
		return {
			status_options: [
				{
					label: this.$t('product.no'), // 否
					value: '0',
				},
				{
					label: this.$t('product.yes'), // 是
					value: '1',
				},
			],

			formValidate: {
				is_sale: null,
				is_deleted: null,
				is_hot: null,
				is_new: null,
				brand_id: null, // 品牌
				category_id: null, // 类别
				keyword: null,
				store_id: null,
			}, // 表单搜索数据
		};
	},
	methods: {

		/**
		 * 提交表单
		 * @return {undefined}
		 */
		handleSearch() {
			this.search(this.formValidate);
		},
	},
};
</script>

